.pt-5
  .row
    .cell-sm-6.cell-fs-12.text-left.d-flex.flex-align-center
      %span#list-num.pl-2
        = t('project_list_title')
    .cell-sm-6.cell-fs-12.text-right.mt-3-fs.mt-0-sm.text-center-fs.text-right-sm
      %button#btn_import.button.info.my-0.kcoin-button-normal
        = t('project_import')

= haml :import

#listContainer
%template#listTemplate
  %ul#lists{"data-role"=>"list",
  "data-cls-list"=>"unstyled-list row d-flex mt-4 mx-0",
  "data-cls-list-item"=>"cell-sm-6 cell-md-3",
  "data-show-pagination"=>"true",
  "data-items"=>"8",
  "data-activity-type"=>"square",
  "data-cls-pagination"=>"flex-justify-center",
  "data-pagination-prev-title"=>"◂",
  "data-pagination-next-title"=>"▸"}
    <% for(var i = 0; i < list.length; i++) { %>
    %li{:onclick=>"loadProjectDetail(<%list[i].github_project_id%>)"}
      %figure.kcoin-figure
        .img-container.thumbnail.px-0.py-0
          <%if(list[i].img) {%>
          %img{:src=>"<%list[i].img%>"}
          <%} else {%>
          %img.kcoin-figure-default-img{:src=>"icons/kcoin-project-list-icon.png"}
          <%}%>
          %div.kcoin-figure-token-div.pos-absolute
            %div.kcoin-figure-token-span
              %p.text-ellipsis.mt-1.ml-1 KCoin: <%list[i].kcoin%>
              %p.text-ellipsis.mt-0.ml-1 Token: <%list[i].project_token%>
          <%if(!list[i].img) {%>
          %div.kcoin-figure-title-letter-div.pos-absolute
            %div.kcoin-figure-title-letter-span
              %p.mx-0 <%list[i].first_word%>
          <%}%>
        %figcaption.painting-name
          %span <%list[i].custom_name%>
    <% } %>


= include_javascript 'project_list'